<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>月结对账</title>
    <link href="static/css/operateBox.css" rel="stylesheet"/>
    <link href="static/css/bootstrap/bootstrap.min.css" rel="stylesheet"/>
    <link href="static/css/other/style.min.css" rel="stylesheet"/>
    <link href="static/css/bootstrap/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="static/css/bootstrap/bootstrap-select.min.css" rel="stylesheet"/>
    <link href="static/js/plugins/layer/laydate/need/laydate.css" rel="stylesheet"/>
    <link href="static/js/plugins/layer/laydate/skins/default/laydate.css" rel="stylesheet"/>
</head>
<body class="kjtc-body">
<!-- 数据表 -->
<div class="operateBox-wrapper">
    <!-- 标题 -->
    <div class="operateBox-title">月结对账</div>
    <!-- 查询栏 -->
    <div class="operateBox-query">
        <div class="query-row">
            <input class="query-input" type="search" placeholder="充电站">
            <button class="query-button button-green" onclick="search()">查询</button>
        </div>
    </div>
    <!-- 工具栏 -->
    <div class="operateBox-toolBox">
        <div class="pull-right">
            <button class="toolBox-button width-100 button-green" data-toggle="modal" data-target="#periodSettingsModal">设置结账周期</button>
            <button class="toolBox-button width-80 button-green">导出Excel</button>
        </div>
        <div class="button-group">
            <!-- 分开两行会产生文本节点 -->
            <button id="summaryBtn" class="toolBox-button width-100 button-green" onclick="showSummary()">汇总</button><button id="detailsBtn" class="toolBox-button width-100 button-white" onclick="showDetails()">详细列表</button>
        </div>
    </div>
    <!-- 数据表 -->
    <div class="operateBox-table">
        <table id="monthlyBillCheckTable"></table>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="periodSettingsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-800">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">设置结账周期</h4>
                </div>
                <div class="modal-body">
                    <div class="input-row">
                        <div class="input-label">结算日期：</div>
                        <input id="balanceDate" class="modal-input">
                        <div class="input-tips">例：25日</div>
                    </div>
                    <div class="input-row">
                        <div class="input-label">最初时间：</div>
                        <input id="startTime" class="modal-input">
                        <div class="input-tips">xxxxxxxxxx</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="query-button button-white" data-dismiss="modal">取消</button>
                    <button type="button" class="query-button button-green">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="static/js/jquery/jquery.min.js"></script>
<script src="static/js/bootstrap/bootstrap.min.js"></script>
<script src="static/js/bootstrap/bootstrap-table.js"></script>
<script src="static/js/bootstrap/bootstrap-table-zh-CN.min.js"></script>
<script src="static/js/bootstrap/bootstrap-select.min.js"></script>
<script src="static/js/plugins/layer/laydate/laydate.js"></script>
<script src="static/js/other/common.js"></script>
<script src="static/js/bill/monthlyBillCheck.js"></script>
</body>
</html>